<style scoped>
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
		height: 100%;
	}
	
	.layout-breadcrumb {
		padding: 10px 15px 0;
	}
	
	.ivu-row-flex {
		height: 100%;
	}
	
	.layout-content {
		min-height: 200px;
		margin: 15px;
		overflow: hidden;
		background: #fff;
		border-radius: 4px;
	}
	
	.layout-content-main {
		padding: 10px;
	}
	
	.layout-copy {
		text-align: center;
		padding: 10px 0 20px;
		color: #9ea7b4;
	}
	
	.layout-menu-left {
		background: #464c5b;
		height: 100%;
	}
	
	.layout-header {
		height: 60px;
		background: #fff;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	}
	
	.layout-logo-left {
		width: 90%;
		height: 30px;
		background: #5b6270;
		border-radius: 3px;
		margin: 15px auto;
		text-align: center;
		line-height: 30px;
		color: #fff;
	}
	
	.layout-ceiling-main a {
		color: #9ba7b5;
	}
	
	.layout-hide-text .layout-text {
		display: none;
	}
	
	.ivu-col {
		/*transition: width .2s ease-in-out;*/
	}
</style>
<template>
	<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
		<Row type="flex">
			<Col :span="spanLeft" class="layout-menu-left" v-show="nav">
			<Menu active-name="1" theme="dark" width="auto">
				<div class="layout-logo-left">PAD响应式后台</div>
				<router-link to="/Home/">
					<MenuItem name="1">
					<Icon type="home" :size="iconSize"></Icon>
					<span class="layout-text">
					首页
				</span>
					</MenuItem>
				</router-link>
				<Submenu name="2">
					<template slot="title">
						用户管理
					</template>
					<router-link to="/Home/player">
						<MenuItem name="2-1"> 玩家管理
						</MenuItem>
					</router-link>
					<MenuItem name="2-2"> 代理管理
					</MenuItem>
				</Submenu>
				<Submenu name="3">
					<template slot="title">
						记录管理
					</template>
					<MenuItem name="3-1"> 充值记录
					</MenuItem>
					<MenuItem name="3-2"> 提现管理
					</MenuItem>
					<MenuItem name="3-3"> 后台充值
					</MenuItem>
				</Submenu>
				<Submenu name="3">
					<template slot="title">
						游戏管理
					</template>
					<MenuItem name="3-1">
					<router-link to="#">充值设置</router-link>
					</MenuItem>
					<MenuItem name="3-2"> 公告设置
					</MenuItem>
					<MenuItem name="3-3"> 通知设置
					</MenuItem>
					<MenuItem name="3-4"> 意见反馈
					</MenuItem>
				</Submenu>
			</Menu>
			</Col>
			<Col :span="spanRight">
			<div class="layout-header">
				<Button type="text" @click="toggleClick">
                    <Icon type="navicon" size="32"></Icon>
                </Button>
			</div>
			<router-view></router-view>
			<!--<div class="layout-content">-->
			<!--<div class="layout-content-main">内容区域</div>-->
			<!--</div>-->
			<div class="layout-copy">
				@2017-08-08 版本 v1.0.0
			</div>
			</Col>
		</Row>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				spanLeft: 8,
				spanRight: 16,
				nav: true,
				flag: true
			}
		},
		created() {
			var userAgentInfo = navigator.userAgent;
			var Agents = ["Android", "iPhone",
				"SymbianOS", "Windows Phone",
				"iPad", "iPod"
			];
			for(var v = 0; v < Agents.length; v++) {
				if(userAgentInfo.indexOf(Agents[v]) > 0) {
					this.flag = false;
				}
			}
			if(this.flag) {
				this.spanLeft = 5;
				this.spanRight = 19
			} else {
				this.spanLeft = 8;
				this.spanRight = 16;
			}
		},
		computed: {
			iconSize() {
				if(this.spanLeft === 8) {
					return this.spanLeft === 8 ? 14 : 24;
				} else {
					return this.spanLeft === 5 ? 14 : 24;
				}
			}
		},
		methods: {
			toggleClick() {
				if(this.$route.path == '/Home' || this.$route.path == '/Home/') {
					if(this.$store.state.e_change==1){
						this.$store.commit('echart_c',0)
					}else{
						this.$store.commit('echart_c',1)
					}
				}
				if(!this.flag) { //如果是手机端就占8份
					if(this.spanLeft === 8) {
						this.nav = false;
						this.spanLeft = 0;
						this.spanRight = 24;
					} else {
						this.nav = true;
						this.spanLeft = 8;
						this.spanRight = 16;
					}
				} else {
					if(this.spanLeft === 5) {
						this.spanLeft = 3;
						this.spanRight = 21;

					} else {
						this.spanLeft = 5;
						this.spanRight = 19;
					}
				}

			}
		}
	}
</script>